.calendar {
    position: absolute;
    border: 1px solid #009688;
    border-radius: 2px;
    padding: 2px;
    width: 170px;
    margin-top: 10px;
    background-color: #fff;
    .calendar-top {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
           -moz-box-orient: horizontal;
           -moz-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
           -moz-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        padding-bottom: 5px;
        .select-year {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -webkit-flex-direction: row;
               -moz-box-orient: horizontal;
               -moz-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            -webkit-box-align: center;
            -webkit-align-items: center;
               -moz-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            .auto-year {
                border: 1px solid #ddd;
                width: 50px;
                height: 26px;
                line-height: 26px;
                margin: 0 5px;
                padding: 0 0 0 2px;
            }
            .btn {
                padding: 0 4px;
                height: 26px;
                font-size: 13px;
                text-align: center;
                line-height: 26px;
                border-radius: 2px;
                color: #fff;
                background-color: #009688;
                cursor: pointer;
                display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                -webkit-flex-direction: row;
                   -moz-box-orient: horizontal;
                   -moz-box-direction: normal;
                    -ms-flex-direction: row;
                        flex-direction: row;
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                   -moz-box-pack: center;
                    -ms-flex-pack: center;
                        justify-content: center;
                        -webkit-box-align: center;
                        -webkit-align-items: center;
                           -moz-box-align: center;
                            -ms-flex-align: center;
                                align-items: center;
                .arrow {
                    width: 0;
                    height: 0;
                    border: 6px solid;
                    border-color: transparent #fff transparent transparent;
                    position: relative;
                    -webkit-transform: translateX(-4px);
                       -moz-transform: translateX(-4px);
                        -ms-transform: translateX(-4px);
                         -o-transform: translateX(-4px);
                            transform: translateX(-4px);
                    &:after {
                        content: '';
                        position: absolute;
                        right: -6px;
                        top: -4px;
                        border: 4px solid;
                        border-color: transparent #009688 transparent transparent;
                    }
                }
            }
            .btn-left {
                .arrow {
                    -webkit-transform: rotate(0deg) translateX(-4px);
                       -moz-transform: rotate(0deg) translateX(-4px);
                        -ms-transform: rotate(0deg) translateX(-4px);
                         -o-transform: rotate(0deg) translateX(-4px);
                            transform: rotate(0deg) translateX(-4px);
                }
            }
            .btn-right {
                .arrow {
                    -webkit-transform: rotate(180deg) translateX(-4px);
                       -moz-transform: rotate(180deg) translateX(-4px);
                        -ms-transform: rotate(180deg) translateX(-4px);
                         -o-transform: rotate(180deg) translateX(-4px);
                            transform: rotate(180deg) translateX(-4px);
                }
            }
            
        }
    }
    .calendar-content {
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                -webkit-flex-direction: row;
                   -moz-box-orient: horizontal;
                   -moz-box-direction: normal;
                    -ms-flex-direction: row;
                        flex-direction: row;
                -webkit-box-align: center;
                -webkit-align-items: center;
                   -moz-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                        -webkit-flex-wrap: wrap;
                            -ms-flex-wrap: wrap;
                                flex-wrap: wrap;
            li {
                width: 23px;
                padding-bottom: 3px;
                text-align: center;
                
            }
        }
        .week {
            height: 18px;
            line-height: 18px;
            background-color: #009688;
            color: #fff;
            font-size: 13px;
        }
        .day {
            color: #666;
            font-size: 13px;
            li {
                text-align: center;
                cursor: pointer;
            }
            li.prev,li.next {
                color: #aaa;
            }
            li.select {
                background-color: yellowgreen;
                color: #fff;
                border-radius: 2px;
            }
        }
        .calendar-bottom {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -webkit-flex-direction: row;
               -moz-box-orient: horizontal;
               -moz-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
               -moz-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
               -moz-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            padding: 5px 0;
            .confrim-btn,
            .cancel-btn {
                width: 54px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                font-size: 12px;
                border-radius: 2px;
                cursor: pointer;
                -webkit-box-sizing: border-box;
                   -moz-box-sizing: border-box;
                        box-sizing: border-box;
            }
            .confrim-btn {
                background-color: #009688;
                color: #fff;
            }
            .cancel-btn {
                background-color: #fff;
                color: #666;
                border: 1px solid #ddd;
                margin-left: 6px;
            }
        }
        
    }
}